<template>
  <div>
    <section>
      <el-form ref="form" :model="queryForm" label-width="61px" :inline="true" class="queryForm header-form adjustCondition">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.selectValue" size="small" placeholder="请输入司机姓名/身份证号/手机号查询"></el-input>
        </el-form-item>
<!--        <el-form-item label="状态:" label-width="48px">-->
<!--          <el-radio-group v-model="queryForm.checkedState">-->
<!--            <el-radio v-if="item.value !== '-1'" v-for="item in $dictUtils.getDictList('state')" :key="item.value" :label="Number(item.value)">{{item.label}}</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item>
          <div class="but-container">
            <el-button type="primary" class="search-btn" size="small" @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <section >
      <el-button v-if="hasPermission('truck:truckDriver:add')" type="primary"
        size="small" @click="add">新增</el-button>
      <section class="right-but" style="display:flex">
        <el-button style="cursor:pointer;" type="text">
          <img src="~@/assets/img/export.png" alt="">
        </el-button>
        <el-button type="text" style="margin-right:-13px"  @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">
          <img style="width:44px;height:36px;" src="~@/assets/img/refresh.png" >
        </el-button>
        <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </section>
    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName" @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="司机姓名" sortable="name" min-width="130">
      </el-table-column>
      <el-table-column prop="idcard" label="身份证号" min-width="220">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" min-width="150">
      </el-table-column>
      <el-table-column prop="credentNumber" label="资格证编号" min-width="200">
          <template slot-scope="scope">
              {{scope.row.credentNumber | noValue}}
          </template>
      </el-table-column>
<!--      <el-table-column prop="state" label="状态" width="110">-->
<!--        <template slot-scope="scope">-->
<!--          <section class="state normal" v-if="scope.row.state===1">-->
<!--            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}-->
<!--          </section>-->
<!--          <section class="state empty" v-else>-->
<!--            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}-->
<!--          </section>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <span v-for="(item,index) in checkedProps" :key="index">
          <el-table-column prop="createDate" :label="item"  min-width="200px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{scope.row.createDate | noValue}}
            </template>
        </el-table-column>
          <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy">
                      <span v-if="scope.row.createBy.loginName">
                          {{scope.row.createBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item"  min-width="200px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{scope.row.updateDate | noValue}}
              </template>
          </el-table-column>
          <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy">
                      <span v-if="scope.row.updateBy.loginName">
                          {{scope.row.updateBy.loginName | noValue}}
                      </span>
                      <span v-else>--</span>
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>

      </span>
      <el-table-column prop="address" label="操作" width="220">
        <template slot-scope="scope">
<!--          <template v-for="item in $dictUtils.getDictList('state')">-->
<!--            <el-link type="primary"  v-if="item.value!=='-1'&&hasPermission('truck:truckDriver:edit')&& item.value!==(scope.row.state+'')" :underline="false" @click="editState(item.value,scope.row)"  :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"-->
<!--              >{{item.label}}-->
<!--            </el-link>-->
<!--          </template>-->
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckDriver:edit')" @click="edit(scope.row.id)">修改
          </el-link>
            <el-link type="primary" :underline="false"  v-if="hasPermission('truck:truckDriver:del')"  @click="handleCommand({method:'del', row:scope.row})">删除</el-link>
          <!-- <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckDriver:del')" @click="del(scope.row.id)">删除
          </el-link> -->
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
<!--              <el-dropdown-item  v-if="hasPermission('truck:truckDriver:del')"  :command="{method:'del', row:scope.row}" >删除</el-dropdown-item>-->
              <el-dropdown-item :command="{method:'viewCredent', row:scope.row}" >查看司机证件</el-dropdown-item>
              <el-dropdown-item :command="{method:'viewEncoder', row:scope.row}" >查看司机二维码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        layout="total,sizes,prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
    <DriverFrom ref="driverFrom" @refreshDataList="refreshList(page, 'update_date', 'desc')"></DriverFrom>
     <DriverImage ref="driverImage" @refreshDataList="" style='width: 80px;'></DriverImage>
  </div>
</template>
<script>
  import DriverFrom from './driverFrom'
  import DriverImage from './driverImage'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      DriverFrom,
      PopoverBut,
      DriverImage
    },
    data () {
      return {
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
          label: '创建人',
          key: 'createBy.loginName'
        }, {
          label: '创建时间',
          key: 'createDate'
        },{
          label: '上次操作人',
          key: 'updateBy.loginName'
        }, {
          label: '上次操作时间',
          key: 'updateDate'
        }],
        queryForm: {
          checkedState: '',
          selectValue: ''
        },
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          driver: '11'
        }],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false
      }
    },
    methods: {
      // 获取数据列表
      refreshList (params, orderName, orderByAORC, selectValue, queryState) {
        this.loading = true
        this.$http({
          url: '/truck/driver/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'selectValue': selectValue,
            'state': queryState,
            'orderBy': orderName,
            'orderByAORC': orderByAORC
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
      editState (event, row) {
        this.$confirm('您是否要'+this.$dictUtils.getDictLabel("state", event, "")+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
            this.loading = true
            this.$http({
              url: '/truck/driver/modify-state',
              method: 'post',
              params: {
                'id': row.id,
                'state': event,
                'effectTimeStamp': row.effectTimeStamp
              }
            }).then(({data}) => {
              if (data && data.success) {
                this.$message.success(data.message)
                this.refreshList(this.page, '', '')
              }
              this.loading = false
            })
        })

      },
      edit (row) {
        this.$refs.driverFrom.init('edit', row)
      },
      add () {
        this.$refs.driverFrom.init('add')
      },
      queryEncoder (id, name, phone) {
        this.$refs.driverImage.init('viewEncoder', id, name, phone)
      },
      queryCredent (id, name, phone) {
        this.$refs.driverImage.init('viewCredent', id, name, phone)
      },
      handleCommand (command) {
        if (command.method === 'viewCredent') {
          this.queryCredent(command.row.id, command.row.name, command.row.phone)
        } else if (command.method === 'viewEncoder') {
          this.queryEncoder(command.row.id, command.row.name, command.row.phone)
        } else if (command.method === 'del') {
          this.del(command.row.id)
        }
      },
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/driver/delete',
            method: 'delete',
            params: {'ids': ids}
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, 'update_date', 'desc')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn (a) {
        console.log(a)
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 重置查询条件
      reset () {
        this.queryForm = {}
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
        // console.log(e)
      },
        handleSizeChange (e) {
            this.page.pageSize = e
            this.refreshList(this.page, 'update_date', 'desc')
        },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.refreshList(this.page, 'update_date', 'desc')
      },
      tableRowClassName ({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }

    },
    mounted () { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, 'update_date', 'desc')
    }
  }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/config.scss";
::v-deep .el-input--small .el-input__inner {
  height: 36px;
  line-height: 32px;
  width: 230px;
}
::v-deep.queryForm.header-form {
    .el-form-item:first-child{
        /*margin-right: 50px;*/
        .el-input__inner{
            width: 320px;
        }
    }
}
::v-deep .el-table{
    td .cell{
        .el-dropdown{
            margin-right: 40px;
            .el-dropdown-link{
                color: $--color-primary-liyu;
            }
        }
    }
}
</style>
